<template>
  <div>
    <van-search show-action shape="round" placeholder="枪神7plus超竞版 天选3">
      <template #action>
        <van-icon name="comment-o" size="30" />
      </template>
      <template #left>
        <div class="left">华硕商城</div>
      </template>
    </van-search>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" >
      <van-swipe-item v-for="(v,index) in arr" :key="index" @click="fun(index)">
            <img :src="v" alt="">
         </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
import Vue from "vue";
import { Search } from "vant";
Vue.use(Search);

import { Icon } from "vant";
Vue.use(Icon);

import { Swipe, SwipeItem } from "vant";
Vue.use(Swipe);
Vue.use(SwipeItem);

export default {
    data(){
        return{
            arr:[]
        }
    },
  mounted(){
    this.$http({
        url:"http://localhost:3000/swipe",
        method:"get"
    }).then(res=>{
        this.arr = res.data
    })
  },
  methods:{
    fun(myarr){
      this.$router.push({path:'/banners',
      query:{
        indexs:myarr
      }
      })
    }
  }
};
</script>

<style scoped>
.left {
  height: 35px;
  width: 35px;
  font-size: 12px;
}
.van-search__content--round {
  width: 280px;
  height: 40px;
}
.van-icon-comment-o:before {
  margin-top: 10px;
}
.van-search--show-action {
  position: fixed;
  top: 0;
  z-index: 1;
 opacity: 0.3;
}
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
  .my-swipe .van-swipe-item[data-v-78813048]{
     height: 300px;
  }
  .my-swipe .van-swipe-item[data-v-78813048] img{
     height: 100%;
     width: 100%;
  }
</style>